<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            table,
            td {
                border-collapse: collapse;
            }

            td {
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>

        <script type="text/babel">
            //王者荣耀 英雄的表格
            class Hero extends React.Component {
                state = {
                    heros: [
                        {id: 1, name: '扁鹊', type: '法师'},
                        {id: 2, name: '荆轲', type: '刺客'},
                        {id: 3, name: '后裔', type: '射手'},
                    ]
                }

                add = () => {
                    let {heros} = this.state;
                    //获取输入的英雄名和类型
                    let name = this.name.value;
                    let type = this.type.value;
                    let id = heros.length + 1;
                    //创建对象并插入到 heros 中
                    heros.unshift({
                        id, name, type
                    });
                    //更新
                    this.setState({
                        heros: heros
                    })
                }

                render() {
                    return (
                        <div>
                            名字: <input type="text" ref={el => this.name = el} /> 类型{" "}
                            <input type="text" ref={el => this.type = el} /> <button onClick={this.add}>新增</button>
                            <hr />
                            <table border="1">
                                <thead>
                                    <tr>
                                        <td>ID</td>
                                        <td>英雄</td>
                                        <td>类型</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.state.heros.map((item, index) => {
                                        return <tr key={item.id}>
                                                    <td>{item.id}</td>
                                                    <td>{item.name}</td>
                                                    <td>{item.type}</td>
                                                </tr>
                                    })}
                                    
                                </tbody>
                            </table>
                        </div>
                    );
                }
            }

            ReactDOM.render(<Hero />, document.querySelector('#root'));
        </script>
    </body>
</html>
